<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Regions: onkeydown and onkeyup events inside region and outside region using Tab key in forms</title>
        <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
        <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-19-2013 -->
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
        <meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
         tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Tab 
         key is pressed and released.">
        <meta name="flags" content="dom interact">
        <link href="support/css/regions-keyboard.css" rel="stylesheet" type="text/css">
        <link href="/resources/testharness.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/regions-keyboard-events-test-helper.js"></script>
    </head>
    <body>
        <p id="msg">Press the Tab key three times</p>
        <div id="content">
            <div class="block"></div>
            <div class="block"></div>
            <div id="target-block" class="block">
                <form id="my-form">
                    <input type="text" id="textfield-inside" size="10" autofocus>
                    <textarea id="textarea-inside" rows="3" cols="10"></textarea>
                </form>
            </div>
        </div>
        <div class="region"></div>
        <div class="region"></div>
        <div class="region"></div>
        <br/>
        <div id="outside-region">This div is outside the region
            <form id="form-outside">
                <input type="text" id="textfield-outside" size="10">
                <textarea id="textarea-outside" rows="3" cols="10"></textarea>
            </form>
        </div>
        <div id="log"></div>
    </body>
    <script type="text/javascript">
        
        if(getLeftPosition("target-block") !== 0) {

            var test1 = async_test("onkeydown event fired in textfield inside region", {timeout: testTimeout});
                test1.step(function () {
                    var testTarget = document.getElementById("textfield-inside");
                    testTarget.onkeydown = test1.step_func(function (evt) {

                        /* Verify the target outside the region has the correct ID */
                        test(function () {
                            assert_equals(evt.target.id, "textfield-inside");
                        }, "Textfield inside region has the correct ID");

                        /* Verify the textfield received focus from tab key */
                        test(function () {
                            assert_equals(document.activeElement.id, "textfield-inside");
                        }, "Textfield inside region received focus");

                        test1.done();
                    });
                });

            var test2 = async_test("onkeydown event fired in textfield outside region", {timeout: testTimeout});
                test2.step(function () {
                    var testTarget = document.getElementById("textfield-outside");
                    testTarget.onkeydown = test2.step_func(function (evt) {

                        /* Verify the target outside the region has the correct ID */
                        test(function () {
                            assert_equals(evt.target.id, "textfield-outside");
                        }, "Textfield outside region has the correct ID");

                        test2.done();
                    });
                });

            var test3 = async_test("onkeyup event fired in textfield outside region", {timeout: testTimeout});
                test3.step(function () {
                    var testTarget = document.getElementById("textfield-outside");
                    testTarget.onkeyup = test3.step_func(function (evt) {

                        /* Verify the textfield received focus from tab key */
                        test(function () {
                            assert_equals(document.activeElement.id, "textfield-outside");
                        }, "Textfield outside region received focus");

                        test3.done();
                    });
                });

            tabKeyPresses(3);
            completionCallback();

        } //end of getLeftPosition test
        else {
            test(function () {
                assert_true(false);
            }, "Regions are not enabled");
        }
    </script>
</html>